<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
      <el-form-item label="" prop="number">
        <el-input
          v-model="queryParams.number"
          placeholder="请输入订单号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="" prop="userId">
        <el-select v-model="queryParams.userId" placeholder="请选择下单用户查询" size="small" clearable filterable>
          <el-option :label="item.nickName" :value="item.userId" v-for="item in wxList" :key="item.userId" />
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="isLeader">
        <el-select v-model="queryParams.isLeader" placeholder="请选择用户身份" size="small" clearable filterable>
          <el-option label="全部" value="" />
          <el-option :label="value" :value="key" v-for="(value, key) in $msg('isLeader')" :key="key" />
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="status">
        <el-radio-group v-model="queryParams.status" size="small" @input="getList">
          <el-radio label="" border>全部</el-radio>
          <el-radio v-for="(value, key) in $msg('order_status')" :key="key" :label="key" border>{{ value }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row class="row_head">
      <el-col :span="8">订单信息</el-col>
      <el-col :span="8">收货人信息</el-col>
      <el-col :span="8">支付信息</el-col>
    </el-row>
    <el-row v-for="item in orderList" :key="item.id">
      <el-col :span="24" class="item_head">
        <span>订单号：{{ item.number }}</span>
        <el-tag :type="item.type" size="small">{{ $msg('order_status')[item.status] }}</el-tag>
      </el-col>
      <el-col :span="8" class="item_start">
        <el-image :src="item.leaderAvatar" />
        <span>
          <label class="item_start-label" @click="handleView(item)">团长：{{ item.leaderName }}</label>
          <label v-if="item.statusText">
            {{ item.statusText }}：
            <el-tag effect="plain" size="small" v-if="item.latestTime">{{ item.latestTime }}</el-tag>
          </label>
        </span>
      </el-col>
      <el-col :span="8" class="item_center">
        <span>下单人昵称：{{ item.userName }}</span>
        <span>
          下单人头像：
          <el-image :src="item.userAvatar" />
        </span>
        <span>下单人ID：{{ item.userNumber }}</span>
        <span>下单人手机号：{{ item.address.phonenumber }}</span>
      </el-col>
      <el-col :span="8" class="item_middle">
        <span>支付金额：￥{{ item.payAmount }}</span>
        <span>下单时间：{{ item.createTime }}</span>
        <span class="item_middle-span">支付方式：微信付款</span>
      </el-col>
      <el-col :span="24" class="item_footer"></el-col>
    </el-row>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <el-empty description="暂无数据" v-if="!orderList || orderList.length <= 0"></el-empty>

    <el-drawer :title="title" :visible.sync="isShow" direction="rtl" size="60%">
      <el-collapse v-model="activeNames">
        <el-collapse-item title="订单详情" name="1">
          <div class="collapse-item-address">
            <span>收货地址</span>
            <div>
              <span>{{ form.address.userName }}</span>
              <span>{{ form.address.phonenumber }}</span>
            </div>
            <div>{{ form.address.address }}{{ form.address.addressDetails }}</div>
          </div>
          <div class="collpase-item-goods">
            <span>商品信息</span>
            <div class="collpase-item-goods-ele" v-for="(item, index) in form.good" :key="index">
              <img :src="item.imageUrl" alt="">
              <div>
                <span>{{ item.name }}</span>
                <span v-if="item.carSpecs">规格：{{ item.carSpecs.join(',') }}</span>
                <div>
                  <span>x{{ item.count }}</span>
                  <span>￥{{ item.price }}</span>
                </div>
              </div>
            </div>
            <div class="collpase-item-goods-total">
              <span>共<label>{{ form.totalCount }}</label>件</span>
              <span>
                实付：<label>{{ form.payAmount }}</label>元
                （<span>￥{{ form.amount }}</span>）
              </span>
            </div>
          </div>
          <el-row class="collpase-item-other">
            <el-col :span="12">
              <label>跟 团 号：</label>
              <span>{{ form.tuanNumber }}</span>
            </el-col>
            <el-col :span="12">
              <label>下 单 人：</label>
              <img :src="form.userAvatar" alt="">
              <span>{{ form.userName }}</span>
            </el-col>
            <el-col :span="12">
              <label>订单编号：</label>
              <span>{{ form.number }}</span>
            </el-col>
            <el-col :span="12">
              <label>支付时间：</label>
              <span>{{ form.createTime }}</span>
            </el-col>
            <el-col :span="12"></el-col>
          </el-row>
        </el-collapse-item>
        <el-collapse-item title="快递信息" name="2" v-if="form.kuaidis && form.kuaidis.length > 0">
          <el-collapse v-model="activeName" accordion class="custom-collapse">
            <el-collapse-item
              v-for="(item, index) in form.kuaidis"
              :key="index"
              :title="itemTitle(index)"
              :name="index">
              <el-steps direction="vertical" finish-status="success" :active="1">
                <el-step
                  v-for="(ele, eIndex) in item.details.data"
                  :key="eIndex"
                  :title="ele.text"
                  :description="ele.context" />
              </el-steps>
            </el-collapse-item>
          </el-collapse>
        </el-collapse-item>
        <el-collapse-item title="售后详情" name="3" v-if="isRefundApply">
          <el-row class="collpase-item-afterSale">
            <el-col :span="24">
              <label>退款金额：</label>
              <span>￥{{ form.refundApply.refundMoney }}</span>
            </el-col>
            <el-col :span="24">
              <label>退款明细：</label>
              <div class="collpase-item-afterSale-div">
                <div v-for="(item, index) in form.refundApply.good" :key="index">
                  <span>{{ item.name }}</span>
                  <span>x{{ item.count }}</span>
                  <span>退款：￥{{ item.refundAblePrice }}</span>
                </div>
              </div>
            </el-col>
            <el-col :span="24">
              <label>申请原因：</label>
              <span>{{ form.refundApply.reason }}</span>
            </el-col>
            <el-col :span="24">
              <label>补充说明：</label>
              <span>{{ form.refundApply.remark }}</span>
            </el-col>
            <el-col :span="24">
              <label>申请时间：</label>
              <span>{{ form.refundApply.createTime }}</span>
            </el-col>
          </el-row>
          <div class="collpase-item-history">
            <span>售后历史</span>
            <el-row>
              <el-col :span="24" v-for="(item, index) in form.refundApply.refundHistoryList" :key="index">
                <span>{{ item.details.title }}</span>
                <span>{{ item.handleTime }}</span>
                <span>{{ item.details.goodMsg }}</span>
                <span>退款原因：{{ item.details.reason }}</span>
                <span>申请说明：{{ item.details.remark }}</span>
              </el-col>
            </el-row>
          </div>
        </el-collapse-item>
      </el-collapse>
    </el-drawer>
  </div>
</template>
<script>
import { listOrder, getOrder } from '@/api/business/order'
import { listAll } from '@/api/business/user'
import TestAvatar from '@/assets/image/profile.jpg'
export default {
  data() {
    return {
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        number: '',
        isLeader: '',
        status: '',
      },
      // 表格数据
      orderList: [],
      wxList: [],
      TestAvatar,
      // el-dialog
      title: '',
      isShow: false,
      form: {
        address: {},
        kuaidis: [],
      },
      activeNames: ['1'],
      activeName: '1',
    }
  },
  computed: {
    isRefundApply() {
      const { refundApply } = this.form 
      return refundApply && JSON.stringify(refundApply) !== '{}'
    },
    itemTitle() {
      return index => `快递${index + 1}`
    },
  },
  created() {
    listAll().then(res => {
      this.wxList = res.data
      this.getList()
    })
  },
  methods: {
    handleView(row) {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      getOrder(row.id).then(res => {
        loading.close()
        const { address, good, refundApply, kuaidis } = res.data
        res.data.address = JSON.parse(address)
        res.data.good = JSON.parse(good)
        ;refundApply
          && (
            res.data.refundApply.good = JSON.parse(refundApply.good),
            res.data.refundApply.refundHistoryList.map(item => {
              item.details = JSON.parse(item.details)
              item.details.goodMsg = item.details.goodMsg.join('；')
            })
          )
        ;kuaidis
          && res.data.kuaidis.map(item => {
            item.details = JSON.parse(item.details)
            switch (item.details.state) {
              case '0':
                item.details.stateText = '在途中'
                break
              case '1':
                item.details.stateText = '揽收'
                break
              case '2':
                item.details.stateText = '疑难'
                break
              case '3':
                item.details.stateText = '已签收'
                break
              case '4':
                item.details.stateText = '退签'
                break
              case '5':
                item.details.stateText = '派件中'
                break
              case '8':
                item.details.stateText = '清关'
                break
              case '14':
                item.details.stateText = '已拒签'
                break
            }
            item.details.data.map((ele, index) => ele.text = `${index === 0 ? item.details.stateText : ''} ${ele.time}`)
          })

        res.data.totalCount = res.data.good.reduce((pre, item) => {
          return pre += item.count
        }, 0)
        
        console.log(res)

        this.form = res.data
        this.isShow = true
        this.title = (
          row.status === '5' || row.status === '6' || row.status === '7'
        ) ? '售后详情'
          : '订单详情'
      }).catch(() => loading.close())
    },
    handleCancel() {
      this.isShow = false
      this.title = ''
      this.form = {}
    },
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    resetQuery() {
      this.resetForm("queryForm")
      this.handleQuery()
    },
    getList() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      listOrder(this.queryParams).then(res => {
        loading.close()
        res.rows.map(item => {
          item.address = JSON.parse(item.address)
          item.good = JSON.parse(item.good)
          switch (item.status) {
            case '0':
              item.type = 'warning'
              break
            case '1':
              item.type = ''
              item.statusText = '支付时间'
              item.latestTime = item.payTime
              break
            case '2':
              item.type = ''
              item.statusText = '发货时间'
              item.latestTime = item.deliveryTime
              break
            case '3':
              item.type = ''
              item.statusText = '发货时间'
              item.latestTime = item.deliveryTime
              break
            case '4':
              item.type = 'success'
              item.statusText = '收货时间'
              item.latestTime = item.receiptTime
              break
            case '5':
              item.type = 'warning'
              item.statusText = '申请时间'
              item.latestTime = item.refundApply?.createTime
              break
            case '6':
              item.type = 'info'
              item.statusText = '退款时间'
              item.latestTime = item.refundTime
              break
            case '7':
              item.type = 'info'
              item.statusText = '取消时间'
              item.latestTime = item.closeTime
              break
          }
        })        
        this.orderList = res.rows
        this.total = res.total
      }).catch(() => {
        loading.close()
        this.orderList = []
        this.total = 0
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.row_head {
  text-align: center;
  padding: 15px 0;
  background: #f3f5f6;
  border-radius: 5px 5px 0 0;
  font-size: 14px;
  font-weight: 600;
  // font-family: cursive;
}
.item_head {
  padding: 10px 0 10px 40px;
  background: #f3f5f6;
  font-size: 14px;
  // font-family: cursive;

  & > span {
    margin: 0 15px 0 0;
  }
}
.item_start {
  display: flex;
  padding: 10px 0 8px 20px;
  background: #fff;

  .el-image {
    width: 120px;
    height: 120px;
    border-radius: 5px;
  }
  & > span {
    margin: 0 0 0 10px;

    label {
      display: block;
      margin: 15px 0;
      font-size: 14px;
      font-weight: normal;
      // font-family: cursive;

      .el-tag {
        color: #ec3b9c;
        border-color: #ec3b9c;
        background: #fff0f6;
      }
    }
    .item_start-label:hover {
      text-decoration: underline;
      cursor: pointer;
      color: #2440b3;
    }
  }
}
.item_center {
  padding: 0 0 0 20px;
  background: #fff;
  border-left: 1px solid #dcdfe6;
  border-right: 1px solid #dcdfe6;
  font-size: 14px;
  // font-family: cursive;

  span {
    display: flex;
    align-items: center;
    margin: 10px 0;

    .el-image {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
  }
}
.item_middle {
  padding: 10px 0 20px 20px;
  background: #fff;
  font-size: 14px;
  // font-family: cursive;

  span {
    display: block;
    margin: 15px 0;
  }
  .item_middle-span {
    color: #42B983;
    font-weight: 600;
  }
}
.item_end {
  height: 138px;
  display: flex;
  align-items: center;
  padding: 0 0 0 20px;
  border-left: 1px solid #dcdfe6;
}
.item_footer {
  height: 15px;
  border-top: 1px solid #f5f7f9;
}
.collapse-item-address {
  padding: 10px;
  border: 1px solid #FEE2EA;
  border-radius: 5px;

  & > span {
    font-weight: 600;
    font-size: 16px;
    // font-family: cursive;
  }
  div span {
    margin: 0 10px 0 0;
  }
}
.collpase-item-goods {
  padding: 10px;
  border: 1px solid #FEE2EA;
  border-radius: 5px;
  margin: 20px 0;

  & > span {
    display: block;
    margin: 0 0 10px;
    font-weight: 600;
    font-size: 16px;
    // font-family: cursive;
  }
  .collpase-item-goods-ele {
    display: flex;
    margin: 0 0 10px;

    img {
      width: 80px;
      height: 80px;
      margin: 0 10px 0 0;
      border-radius: 5px;
    }
    & > div {
      width: calc(100% - 80px - 10px);

      & > span {
        display: block;
        margin: 0 0 5px;
      }
      div {
        display: flex;
        justify-content: space-between;
      }
    }
  }
  .collpase-item-goods-total {
    text-align: end;

    & > span {
      margin: 0 0 0 20px;

      label {
        color: #FF5B8F;
        font-weight: 600;
        font-size: 16px;
      }
      span {
        text-decoration: line-through;
      }
    }
  }
}
.collpase-item-other {
  padding: 10px;
  border: 1px solid #FEE2EA;
  border-radius: 5px;
  margin: 20px 0 0;

  .el-col {
    display: flex;
    align-items: center;

    img {
      width: 25px;
      height: 25px;
      margin: 0 5px 0 0;
      border-radius: 50%;
    }
  }
}
.collpase-item-afterSale .el-col {
  display: flex;
}
.collpase-item-afterSale-div span {
  margin: 0 20px 0 0;
}
.collpase-item-history {
  margin: 20px 0 0;
  padding: 10px;
  border: 1px solid #FEE2EA;
  border-radius: 5px;

  & > span {
    margin: 0 0 5px;
    font-weight: 600;
    font-size: 16px;
    // font-family: cursive;
  }
  span {
    display: block;
  }
  .el-row .el-col span {
    padding: 10px 0;
  }
  .el-row .el-col span:first-child {
    border-top: 1px solid #dcdfe6;
  }
}
.custom-collapse {
  margin: 0 20px;
}
</style>
<style scoped>
.app-container /deep/ .el-radio--small.is-bordered {
  margin: 0 5px;
}
.app-container /deep/ .el-drawer .el-drawer__body {
  padding: 0 10px;
}
.app-container /deep/ .el-drawer .el-drawer__header {
  font-weight: 600;
  color: #000;
}
</style>